@responsive {
    @each $width in (0,1,2,3,4,5,6,8,10,12,16,20,24,32,40,48,56,64,72,80,88,96,100,120,140,160,180,200) {
        .w-#{$width} {width: #{$width/4}rem;}
        .h-#{$width} {height: #{$width/4}rem;}
    }

    @each $pctName, $pct in (
        '1\\/2': 50,
        '1\\/3': 33.333333,
        '2\\/3': 66.666667,
        '1\\/4': 25,
        '2\\/4': 50,
        '3\\/4': 70,
        '1\\/5': 20,
        '2\\/5': 40,
        '3\\/5': 60,
        '4\\/5': 80,
        '1\\/6': 16.666667,
        '2\\/6': 33.333333,
        '3\\/6': 50,
        '4\\/6': 66.666667,
        '5\\/6': 83.333333,
        '1\\/12': 8.333333,
        '2\\/12': 16.666667,
        '3\\/12': 25,
        '4\\/12': 33.333333,
        '5\\/12': 41.666667,
        '6\\/12': 50,
        '7\\/12': 58.333333,
        '8\\/12': 66.666667,
        '9\\/12': 75,
        '10\\/12': 83.333333,
        '11\\/12': 91.666667,
    ){
        .w-#{$pctName} {width: percentage($number: ($pct/100));}
    }

    .w-full {width: 100%;}
    .h-full {height: 100%;}
    .w-auto {width: auto;}
    .h-auto {height: auto;}
    .max-w-full {max-width: 100%;}
    .max-h-full {max-height: 100%;}

    .w-screen {width: 100vw;}
    .h-screen {height: 100vh;}
    .min-w-screen {min-width: 100vw;}
    .min-h-screen {min-height: 100vh;}
}
